<template>
    <var-swipe @change="onChange" :autoplay="3000">
        <var-swipe-item v-for="(item, index) in props.list">
            <div
                class="banner-video"
                @click="onPlay(index)"
                v-if="item.type == 2"
            >
                <canvas :ref="(ref) => (canvasRef[index] = ref)"></canvas>

                <template v-if="list.length">
                    <div class="loading" v-if="!isFinish[index]">
                        <var-loading color="#fff" size="large" />
                    </div>

                    <img
                        :src="`${_oss_}images/szr-poster.jpg`"
                        v-if="!isFinish[index]"
                        class="poster"
                    />

                    <div class="play-btn" v-if="isPause[index]">
                        <img :src="`${_oss_}images/icon-play.svg`" />
                    </div>

                    <div
                        class="szr-btn"
                        @click.stop="
                            typeof props.onJumpPath === 'function' &&
                                props.onJumpPath(
                                    'https://szr.yzpt8.com',
                                    true,
                                    true
                                )
                        "
                    >
                        <img :src="`${_oss_}images/szr-experience-btn.png`" />
                    </div>
                </template>
            </div>
            <div
                class="banner"
                @click="props.onJumpPath(item.url)"
                v-if="item.type == 1"
            >
                <img
                    :src="
                        item.banner_image +
                        '?x-oss-process=image/watermark,image_' +
                        toBase64('water/watermark.png')
                    "
                    :title="item.title"
                    alt="北京华锐云空间"
                />

                <div class="live-time" v-if="item.livetime">
                    {{ item.livetime }}
                </div>
            </div>
        </var-swipe-item>
    </var-swipe>
</template>
<script setup>
const props = defineProps({
    list: {
        type: Array,
        default: () => [],
    },

    onJumpPath: {
        type: Function,
        default: () => {},
    },
});

const isPause = ref({});
const isEnd = ref({});
const canvasRef = ref({});
const isFinish = ref({});
const player = reactive({});

watch(
    () => props.list,
    async () => {
        await nextTick();
        for (let index in props.list) {
            if (props.list[index].type == 2) {
                player[index] = new JSMpeg.Player(
                    props.list[index].banner_image,
                    {
                        canvas: canvasRef.value[index], // 容器id
                        progressive: false,
                        loop: false,
                        audio: false,
                        onSourceCompleted: () => {
                            isFinish.value[index] = true;
                        },
                        onPlay: () => {
                            isPause.value[index] = false;
                        },
                        onPause: () => {
                            isPause.value[index] = true;
                        },
                        onEnded: () => {
                            isEnd.value[index] = true;
                        },
                    }
                );
            }
        }
    },
    {
        immediate: true,
    }
);

const onPlay = (index) => {
    if (isPause.value) {
        player[index].currentTime = 0;
        player[index].play();
        isEnd.value[index] = false;
    }
};

const onChange = async (activeIndex) => {
    await nextTick();

    if (props.list[activeIndex].type == 2) {
        !isEnd.value[activeIndex] && player[activeIndex].play();
    }

    for (let index in props.list) {
        if (props.list[index].type == 2 && index != activeIndex) {
            player[index].pause();
        }
    }
};
</script>
<style lang="scss" scoped>
.banner {
    position: relative;
    width: 100%;
    height: 450px;

    .live-time {
        position: absolute;
        left: 160px;
        bottom: 101px;
        font-size: 14px;
        color: #fff;
        font-weight: bold;
    }

    img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    &-video {
        position: relative;
        width: 100vw;
        height: 450px;

        canvas {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .loading {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }

        .poster {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            // z-index: 9;
        }

        .play-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            img {
                width: 30px;
                height: 30px;
            }
        }

        video {
            width: 100%;
            height: 417px;
            object-fit: cover;
            visibility: inherit;

            &::-webkit-media-controls-fullscreen-button,
            &::-webkit-media-controls-mute-button,
            &::-webkit-media-controls-timeline {
                display: none;
            }
        }

        .szr-btn {
            position: absolute;
            left: 50%;
            bottom: 50px;
            width: 120px;
            transform: translate(-50%, -50%);

            img {
                width: 100%;
                cursor: pointer;
            }
        }
    }
}
</style>
